
    <!DOCTYPE html>
    <html lang="zh-CN">
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>项目为什么要用设计模式？ - 学习卡片</title>
      <style>
        body { font-family: sans-serif; background-color: #f0f8ff; color: #333; display: flex; flex-direction: column; align-items: center; padding: 50px 20px; }
        .header h1 { font-size: 32px; }
        .grid-container { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; width: 100%; max-width: 1200px; }
        .card-container { perspective: 1200px; cursor: pointer; height: 250px; }
        .card { width: 100%; height: 100%; position: relative; transform-style: preserve-3d; transition: transform 0.7s; border-radius: 16px; box-shadow: 0 4px 16px rgba(0,0,0,0.08); }
        .card-container.flipped .card { transform: rotateY(180deg); }
        .card-face { position: absolute; width: 100%; height: 100%; backface-visibility: hidden; display: flex; flex-direction: column; box-sizing: border-box; border-radius: 16px; background-color: #fff; padding: 24px; }
        .card-back { background-color: #f0fff4; transform: rotateY(180deg); justify-content: space-between; }
        .card-category { font-size: 14px; color: #0052d9; margin-bottom: 8px; font-weight: 500; }
        .card-question { font-size: 20px; font-weight: 500; flex-grow: 1; display: flex; align-items: center; justify-content: center; text-align: center; }
        .card-answer-wrapper { flex-grow: 1; overflow-y: auto; }
        .card-answer { font-size: 15px; line-height: 1.7; }
        .card-footer { font-size: 13px; color: #8a919f; border-top: 1px solid #f0f0f0; padding-top: 16px; margin-top: 16px; }
        .card-source { font-size: 13px; color: #8a919f; border-top: 1px solid #f0f0f0; padding-top: 12px; margin-top: 12px; }
      </style>
    </head>
    <body>
      <div class="header">
        <h1>项目为什么要用设计模式？ - 学习卡片</h1>
      </div>
      <div class="grid-container">
        
    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">理论</div>
          <div class="card-question">设计模式在软件开发中扮演的核心角色是什么？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">理论</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">设计模式提供了一种系统化的方法来解决软件设计中的常见问题，帮助开发人员创建更高效、灵活和可维护的代码，并促进团队合作和代码的长期可维护性。</div>
          </div>
          <div class="card-source">来源: 文档引言部分</div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">优势</div>
          <div class="card-question">设计模式是如何通过模块化来提高代码可重用性的？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">优势</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">设计模式提供了经过验证的解决方案，帮助开发人员创建可重用的、模块化的代码组件。这使得代码更加通用和灵活，从而可以在不同的项目中重用，而不必重新发明轮子。</div>
          </div>
          <div class="card-source">来源: 1. 提高代码可重用性</div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">优势</div>
          <div class="card-question">为什么说结构化的设计是设计模式增强代码可维护性的关键？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">优势</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">因为设计模式促进了代码的结构化，使代码更加清晰和易于理解。这种结构化的设计使得开发人员可以更容易地理解、修改和扩展现有的代码，从而简化了维护工作。</div>
          </div>
          <div class="card-source">来源: 2. 增强代码的可维护性</div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">模式</div>
          <div class="card-question">文档中提到了哪两个设计模式作为提高代码扩展性的例子？它们是如何实现这一点的？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">模式</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">文档中提到了工厂模式和策略模式。它们提供了处理变化的机制，允许开发人员在不改变现有代码的情况下，增加新的功能或改变现有功能。</div>
          </div>
          <div class="card-source">来源: 3. 提高代码的扩展性</div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">机制</div>
          <div class="card-question">设计模式如何通过提供“标准化解决方案”来促进团队合作？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">机制</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">设计模式提供了一种标准化的解决方案，使得团队成员之间能够使用相同的设计模式进行沟通和协作。这使得代码更加一致，并减少了因理解不一而产生的沟通障碍。</div>
          </div>
          <div class="card-source">来源: 4. 促进团队合作</div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">特性</div>
          <div class="card-question">以观察者模式为例，解释设计模式如何通过解耦来提升系统的灵活性。</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">特性</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">观察者模式允许对象之间的解耦，使得系统在扩展和变更时更具灵活性，因为它避免了对象之间紧密耦合的依赖关系。</div>
          </div>
          <div class="card-source">来源: 6. 提升代码的灵活性</div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">模式</div>
          <div class="card-question">文档中提到的哪个设计模式可以改善代码的可测试性？它是如何做到的？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">模式</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">文档提到了依赖注入模式。它通过将对象的依赖项注入到类中，而不是在类内部创建这些依赖项，这使得在进行单元测试时更容易替换和模拟依赖项，从而简化了测试过程。</div>
          </div>
          <div class="card-source">来源: 7. 改善代码的可测试性</div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">特性</div>
          <div class="card-question">文档中提到了哪两种模式有助于提升系统的解耦性？解耦能带来什么好处？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">特性</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">文档提到了适配器模式和桥接模式。解耦的好处是系统组件能够独立工作而不影响其他组件，从而提高了系统的灵活性和可维护性。</div>
          </div>
          <div class="card-source">来源: 8. 提升系统的解耦性</div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">理论</div>
          <div class="card-question">除了代码本身，设计模式还能如何提高设计的“可理解性”？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">理论</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">设计模式为解决特定问题提供了标准化的解决方案，这使得设计意图、架构结构和设计决策过程更加透明和易于被其他开发人员理解。</div>
          </div>
          <div class="card-source">来源: 9. 提高设计的可理解性</div>
        </div>
      </div>
    </div>

      </div>
    </body>
    </html>
